<template>
  <el-container>
    <el-header height="60">
      <v-header @func="setMenuStatus">
        <template v-slot:icon>
          <el-image
              v-on:click="clickImg"
              :src="logoUrl"
              :fit="'fill'"
              class="iconImg"></el-image>
        </template>
        <template v-slot:avatar_slot>
          <div class="avatarInfo">
            <el-space direction="vertical" :size="4">
              <el-link href="#" :underline="false" class="content">用户名 : {{ currentUsername()}}</el-link>
              <!-- <el-link href="/user/accountInfo" :underline="false" class="content">账号信息</el-link> -->
              <el-link href="#" :underline="false" @click="dialogVisible=true" class="content">修改密码</el-link>
              <!-- <el-link href="/user/unreadNews" :underline="false" class="content">未读消息</el-link> -->
              <el-link href="#" :underline="false" @click="logout" class="contentLast">退出</el-link>
            </el-space>
          </div>
        </template>
      </v-header>
    </el-header>
    <el-container>
      <transition appear name="side_anime">
        <el-aside v-if="menu_status" class="side_bar">
          <v-side-bar v-show="loginData.roles === 'reception'">
            <template v-slot:funcs>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/staffInfo">
                  <span>个人信息</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/appointment">
                  <span>门诊挂号</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/payBill">
                  <span>前台缴费</span>
                </router-link>
              </div>
            </template>
          </v-side-bar>
          <v-side-bar v-show="loginData.roles === 'doctor'">
            <template v-slot:funcs >
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/staffInfo">
                  <span>个人信息</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/patientList">
                  <span>病人管理</span>
                </router-link>
              </div>
              <div class="func">
                <el-button type="danger" round @click="discontinue" v-show="doctorStatus == 1">中止挂号</el-button>
                <el-button type="success" round @click="discontinue" v-show="doctorStatus == 0">开启挂号</el-button>
              </div>
            </template>
          </v-side-bar>
          <v-side-bar v-show="loginData.roles === 'superadmin'">
            <template v-slot:funcs>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/staffInfo">
                  <span>个人信息</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/staffList">
                  <span>医职人员管理</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/subject">
                  <span>科室管理</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/newsList">
                  <span>资讯管理</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/finance">
                  <span>查看流水</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/roleList">
                  <span>角色权限管理</span>
                </router-link>
              </div>
            </template>
          </v-side-bar>
          <v-side-bar v-show="loginData.roles === 'pharmacist'">
            <template v-slot:funcs>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link active-class="active" to="/homeview/staffInfo">
                  <span>个人信息</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/takeMedicine">
                  <span>派药管理</span>
                </router-link>
              </div>
              <div class="func">
                <i class="el-icon-camera-solid"></i>
                <router-link to="/homeview/medicineList">
                  <span>药物管理</span>
                </router-link>
              </div>
            </template>
          </v-side-bar>
        </el-aside>
      </transition>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    <el-dialog
      title="修改密码"
      v-model="dialogVisible"
      width="30%"
      :before-close="dialogBeforeClose">
      <el-form :model="updateForm" ref="updateForm" label-width="100px" class="demo-ruleForm" :rules="rules">
          <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="updateForm.oldPassword" clearable type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="updateForm.newPassword" clearable type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPassword">
              <el-input v-model="updateForm.checkPassword" clearable type="password"></el-input>
          </el-form-item>
      </el-form>
      <div>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword('updateForm')">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import vHeader from "../components/header_top.vue";
import vSideBar from "../components/side-bar.vue";
import board1 from "./board1.vue";
import {mapState} from 'vuex';
import {changeStatus, getStatus, loginOut, updateStaffPass} from '../api/api'

export default {
    inject:['reload'],
  name: "HomeView",
  components: {vHeader, vSideBar, board1},
  computed:{
    ...mapState('medicalStaff',['loginData'])
  },
  data() {
    //修改密码验证规则
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.updateForm.checkPassword !== '') {
          this.$refs.updateForm.validateField('checkPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.updateForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      logoUrl: 'https://gitee.com/Kolvzaki/pics/raw/master/img/logo.png',
      menu_status: true,
      updateForm:{},
      dialogVisible:false,
      rules: {
        oldPassword:{ required:true, message:'不能为空', trigger: 'blur'},
        newPassword:{ required:true, validator: validatePass, trigger: 'blur'},
        checkPassword:{ required:true, validator: validatePass2, trigger: 'blur'}
      },
      doctorStatus:1,
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },

  mounted() {
    this.currentUsername();
    this.getDoctorStatus();
    var storage = localStorage.getItem("localData");
    if (storage) {
      let localData = JSON.parse(storage);
      console.log(localData);
      this.$store.dispatch("medicalStaff/login",localData)
    } 
  },


  methods: {
    clickImg: function () {
      console.log("点击图片")
    },
    //header传来菜单状态
    setMenuStatus: function (msg) {
      this.menu_status = msg
    },

    //修改密码
    updatePassword(formName) {
      let data = {
        oldPassword:this.updateForm.oldPassword,
        newPassword:this.updateForm.checkPassword
      }
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      console.log(data)
      this.$refs[formName].validate((valid) => {  //开启校验
          if (valid) {   // 如果校验通过，请求接口，允许提交表单
              updateStaffPass(data,header).then(response => {
                  console.log('请求成功',response)
                  if (response.ret === 0){
                      this.dialogVisible=false
                      this.$message({
                          message:'密码修改成功',
                          type: 'success',
                          showClose:true
                      })
                      this.$router.push('/login')
                      // this.reload()
                  }else {
                      this.$message({
                          message:'密码修改失败',
                          type: 'error',
                          showClose:true
                      })
                  }
              })
          } else {   //校验不通过
              return false;
          }
      });
    },

    //获取医生挂号状态
    getDoctorStatus(){
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      getStatus(header).then(response => {
        console.log('请求成功',response)
        if (response.ret == '0') {
          this.doctorStatus = response.status
        }else {
          console.log('当前角色不是医生,无法获取');
        }
      })
    },

    //修改挂号状态
    discontinue() {
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      let header = {
        'satoken':token
      }
      this.$confirm('此操作将修改您的是否可挂号状态, 是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          changeStatus(header).then(response => {
            console.log('请求成功',response)
            if (response.ret == '0') {
              this.doctorStatus = response.status
              this.$message({
                message:'修改挂号状态成功',
                type: 'success',
                showClose:true
              })
              this.reload()
            }else {
              this.$message({
                message:'修改挂号状态失败',
                type: 'error',
                showClose:true
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },

    //获取当前用户名
    currentUsername() {
      let storage = localStorage.getItem("loginData");
      let jsonData = JSON.parse(storage);
      console.log(jsonData.username);
      return jsonData.username;
    },

    //登出
    logout() {
      // console.log(111)
      let token = this.$store.state.medicalStaff.loginData.tokenValue
      console.log(token)
      let header = {
        'satoken':token
      }
      loginOut(header).then(response => {
        console.log('请求成功',response)
        if(response.ret === '0'){
          console.log('登出成功');
          // localStorage.setItem('loginData','')
          localStorage.clear()
          this.$router.push('/login')
        }else {
          this.$message({
            message:'登出失败',
            type: 'error',
            showClose:true
          })
        }
      })
    }
  }
}
</script>

<style scoped>

.el-aside{
  position: relative;
  width: 250px !important;
  margin-right: 30px;
  height: 100%;
}

.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}


.avatarInfo {
  font-size: 16px;
  text-align: center;
  width: 120px;
}

.content {
  width: 150px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: #c0c4cc 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contentLast {
  width: 150px;
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.funArea a {
  font-size: 18px;
  text-decoration: none;
  transition: 0.25s ;
  color: #f4f4f5;
}

.function a:hover {
  color: #00a4ff
}

.iconImg {
  cursor: pointer;
}

.func {
  width: 200px;
  font-size: 20px;
  color: #f4f4f5;
  display: flex;
  margin: 0 auto;
  align-items: center;
  padding-top: 30px;
}

.func_switch {
  width: 200px;
  font-size: 20px;
  color: #f4f4f5;
  display: flex;
  margin-left: 100px ;
  align-items: center;
  padding-top: 30px;
}

.func i:hover {
  color: #00a4ff;
}

.func span {
  margin-left: 10px;
}

.func a {
  color: #f4f4f5;
  text-decoration: none;
}

.func a:hover {
  color: #00a4ff;
}



</style>
